<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8"/>
    <title> VAOI||Login</title>
            <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <!--  <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'/>-->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="./css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="./css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="./dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins -->
    <link href="./dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
	<link href="./css/login.css" rel="stylesheet" type="text/css"/>
	<link href="./css/formvalidation/formValidation.min.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="../alertify.js/lib/alertify.js"></script>
	<link rel="stylesheet" href="./alertify.js/themes/alertify.core.css" />
	<link rel="stylesheet" href="./alertify.js/themes/alertify.default.css" />

	<script src="./js/jquery.min.js" type="text/javascript"></script>
	<script src="./js/bootstrap.min.js" type="text/javascript"></script>
    <script src="./js/formValidation.min.js" type="text/javascript"></script>
    <script src="./js/framework/bootstrap.min.js" type="text/javascript"></script>
    <script src="./src/hello.js" type="text/javascript"></script>
    <script src="./src/modules/google.js" type="text/javascript"></script>
    <script src="./src/modules/facebook.js" type="text/javascript"></script>
    
    <!-- Codigo Importante  -->
    <script src="./javaScriptCreados/urlServicioRest.js" type="text/javascript"></script>
    
  </head>
  <body class="skin-green">
    <!-- Site wrapper -->
    <div class="wrapper">
      
      <header class="main-header">
        <a class="logo"><b>VAOI</b></a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          
        </nav>
      </header>
      
        <!-- =============================================== -->
      <!-- Left side column. contains the sidebar -->
      <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">

          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="sidebar-menu">
		  
            <li class="header" >Panel de Navegación</li>

            <li>
              <a href="./home.html">
                <i class="fa fa-home"></i> <span>Pagina Principal</span>
              </a>
            </li>                
            
              <li class="treeview">
              <a >
                 <i class="fa fa-plus-square"></i> <span>Registrarse</span> <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="./ADMIN/registro.html"><i class="fa fa-circle-o"></i> Registro Admin</a></li>
                <li><a href="./USER/registro.html"><i class="fa fa-circle-o"></i> Registro Usuario</a></li>
              </ul>
            </li>
            
			
          </ul>
        </section>
        <!-- /.sidebar -->
      </aside>
      
      <!-- =============================================== -->

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <!-- Main content -->
        <section class="content">

		<div class="omb_login">
			<h3 class="omb_authTitle">
				Inicia Sesión
			</h3>
			
		
			<div class="row omb_row-sm-offset-4 omb_socialButtons " >
				<div class="col-xs-6 col-sm-3">
					<a class="btn btn-lg btn-block omb_btn-facebook"  id="facebook" onclick="hello.login('facebook');"> <i
						class="fa fa-facebook visible-xs"></i> <span class="hidden-xs">Facebook</span>
					</a>
				</div>

				<div class="col-xs-6 col-sm-3">
					<a class="btn btn-lg btn-block omb_btn-google" id="google" onclick="hello.login('google');"> <i
						class="fa fa-google-plus visible-xs"></i> <span class="hidden-xs">Google+</span>
					</a>
				</div>
				
			</div>
			
			<div id="profile"> </div>
			
			<div class="row omb_row-sm-offset-4 omb_loginOr">
				<div class="col-xs-12 col-sm-6">
					<hr class="omb_hrOr" />
					<span class="omb_spanOr">o</span>
				</div>
			</div>

			<div class="row omb_row-sm-offset-4">
				<div class="col-xs-12 col-sm-6">
				
						<div class="form-group">
						   <div class="input-group">
							<span class="input-group-addon"><i class="fa fa-user"></i></span>		
											
							<input id="email" type="email" class="form-control" name="j_username" 
							       placeholder="Correo" required="required" />							
						   </div>
						</div>
									
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-lock"></i></span>
							<input id="passwordField" type="password" class="form-control" name="j_password"
								placeholder="Contraseña" required="required" />
						</div>
						
						<br/>

						<button id="submit" class="btn btn-lg btn-primary btn-block" onclick="loginRest();" type="button">Login</button>

				</div>
			</div>
			
			<br/>

			<div align="center">
						
			<button type="button" class="btn btn-link" onclick="$('#myModal').modal('show');" >Olvidaste Contraseña</button>

			</div>
		</div>				

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" >Recuperar Contraseña</h4>
      </div>
      <div class="modal-body">
   
            <input  id="txtCorreoElectronico" type="email"
                    class="form-control" placeholder="ejemplo@.ejemplo.com" 
                    required="required"/>

      </div>
      <div  align="center">
		<button type="button" class="btn btn-primary" onclick="recuperarCuenta();">Recuperar</button>
        <button type="button" class=" btn btn-danger" data-dismiss="modal" >Cerrar</button>
      </div>
      <br/>
    </div>
  </div>
</div>

        </section><!-- /.content -->

        <!-- Main content -->
        <section class="content">

        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->

      <footer class="main-footer">
        <div class="pull-right hidden-xs">
          <b>Version</b> 1.0
        </div>
        <strong>Copyright 2015-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
    </div><!-- ./wrapper -->
        

    <!-- knockout.js -->
    <script src="./js/knockout.js" type="text/javascript"></script>
    
    <script type="text/javascript">

     /*hello( 'google').logout({force:true},function(e){
	   log("logout-force",e);
        });

       hello( 'facebook' ).logout({force:true},function(e){
	   log("logout-force",e);
       });*/

    hello.init({ 
       	facebook : 356963437842660,
       	google : '1071426054878-4h6407ne7ltg3pdfk9upvsgn5tc6fu7t.apps.googleusercontent.com'
       },{ 
       	scope : 'email',
       	redirect_uri: 'redirect.html'
       	});
    	 

       hello.on('auth.login', function(auth){
       	
       	hello( auth.network ).api( '/me' ).then( function(r){
       		 var label = document.getElementById( "profile_"+ auth.network );

       			label = document.createElement('div');
       			document.getElementById('profile').appendChild(label);
       			document.getElementById('email').setAttribute('value', r.email);
       			document.getElementById('passwordField').setAttribute('value', r.id);
       			nombreUsuario=r.name;
       	jQuery.ajax( {    		
           url: urlRest+'rest/login/crearUsuario/' +r.name + '/'+ r.id +'/'+ r.email +'/'+'2/',
           type: 'PUT'
           } );
       	
       	setTimeout ("submitFormulario()", 700); 

       	});
       	    	
       });
    
    </script>
     

    <!-- jQuery 2.1.3 -->
    <script src="./plugins/jQuery/jQuery-2.1.3.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="./bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- AdminLTE App -->
    <script src="./dist/js/app.min.js" type="text/javascript"></script>
  </body>
</html>